<!Doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=egde,chrome=1">
        <meta content=always name="referrer">
        <title>百度地图示例</title>
        <script type="text/javascript" src="../OL3/ol.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../OL3/ol.css" type="text/css">
    </head>
    <body>
        <div id="baiduMap1" style="width: 100%;height: 400px"></div><br>
        <div id="baiduMap2" style="width: 100%"></div>
        <script>
            var baiduMapLayer1 = new ol.layer.Tile({
                source: new ol.source.XYZ({
                     tilePixelRatio: 2,
                tileUrlFunction: function(tileCoord){ // tileCoord 为瓦片参数的坐标
                    let z = tileCoord[0];
                    let x = tileCoord[1];
                    let y = tileCoord[2];
                    // 计算当前瓦片总数的一半，用于计算地图的中心
                    let halfTileNumber = Math.pow(2, z-1);
                    // 原点移到中心点后，重新计算xy方向上的位置
                    baiduX = x - halfTileNumber;
                    baiduY = y + halfTileNumber;
                    //百度服务url将负数使用M前缀标识
                    if(baiduX < 0) {
                        baiduX = 'M' + (-baiduX);
                    }
                    if(baiduY < 0) {
                        baiduY = 'M' + (-baiduY);
                    }
                    return 'http://online2.map.bdimg.com/onlinelabel/?qt=tile&x=' + baiduX + '&y=' + baiduY + '&z=' + z + '&styles=pl&udt=20160321&scaler=2&p=0';
                }
                })
            })
            var map1 = new ol.Map({
                layers: [
                    baiduMapLayer1
                ],
                view: new ol.View({
                    // 设置成都为地图中心
                    center: [104.06, 30.67],
                    projection: 'EPSG:4326',
                    zoom: 4
                }),
                target: 'baiduMap1'
            })

            // 自定义分辨率和瓦片坐标
            var resolutions = [];
            var maxZoom = 18;
            // 计算百度地图分辨率
            for(let i = 0; i <= maxZoom; i++){
                resolutions[i] = Math.pow(2, maxZoom - i)
            }
            var tilegrid = new ol.tilegrid.TileGrid({
                origin: [0, 0], // 设置原点坐标
                resolutions: resolutions // 设置分辨率
            })
            var baidumapLayer2 = new ol.layer.Tile({
                source: new ol.source.TileImage({
                    projection: 'EPSG:3857',
                    tileGrid: tilegrid,
                    tileUrlFunction: function(tileCoord, pixelRatio, proj) {
                        let z = tileCoord[0];
                        let x = tileCoord[1];
                        let y = tileCoord[2];
                        // 百度瓦片地图服务url将负数使用M前缀来标识
                        if(x < 0) {
                            x = 'M' + (-x)
                        }
                        if(y < 0) {
                            y = 'M' + (-y)
                        }
                        return "http://online0.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20160426&scaler=1&p=0"
                    }
                })
            })
            var map2 = new ol.Map({
                layer: [
                    baidumapLayer2
                ],
                view: new ol.View({
                    // 设置成都为地图中心
                    center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
                    zoom: 10
                }),
                target: 'baiduMap2'
            })
        </script>
    </body>
</html>